<script setup lang="ts">
import { defineProps, onMounted, ref } from 'vue'
defineProps<{
  data: {
    name: string
    content: string
  }
}>()
const textareaRef = ref<HTMLTextAreaElement | null>(null)
function resizeHeight(textarea: HTMLTextAreaElement) {
  textarea.style.height = textarea.scrollHeight + 'px'
}

onMounted(() => {
  if (textareaRef.value) {
    resizeHeight(textareaRef.value)
  }
})
</script>

<template>
  <textarea
    ref="textareaRef"
    class="art"
    :name="data.name"
    placeholder="没有内容..."
    :value="data.content"
    readonly
  ></textarea>
</template>

<style scoped>
textarea {
  padding: 10px 0;
  display: block;
  resize: none;
  min-height: 200px;
  height: auto;
  width: 100%;
  font-size: 18px;
  box-sizing: border-box;
  background-color: unset;
  border: none;
  outline: none;
  color: var(--color3);
  overflow: hidden;
}
</style>
